<extend name="Public/base" />

<block name="style">
    <style>
        .sidebar .right-cnt{
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
            -moz-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
            box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
            min-height: 530px;
            display: block;
            border: 1px solid #c9ccd0;
            background-color: #fff;
        }
        .sidebar .right-head{
            overflow: hidden;
            padding: 0 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #c9ccd0;
            background-color: #dee0e6;
            background-image: url(../../image/report/gradient-line.png);
            background-position: top;
            background-repeat: no-repeat;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            border-top-right-radius: 5px;
            -webkit-border-top-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            border-top-left-radius: 5px;
        }
        .sidebar .prev-block{
            width: 100%;
            height: 203px;
            line-height: 203px;
            margin-bottom: 40px;
            text-align: center;
        }
        .sidebar .prev-block .file-prev{
            max-width: 203px;
            max-height: 203px;
            vertical-align: middle;
            background-color: #f0f0f0;
            -webkit-box-shadow: 0 0 2px rgba(120,120,120,0.5);
            -moz-box-shadow: 0 0 2px rgba(120,120,120,0.5);
            box-shadow: 0 0 2px rgba(120,120,120,0.5);
        }
        }
        .sidebar .right-body-block .file-info-item {
            margin-bottom: 8px;
        }
    </style>
</block>

<block name="sidebar">
    <div class="right-cnt">
        <!-- ko ifnot: certainFile -->
        <div class="right-head">
            未选择文件
        </div>
        <div class="right-body">
            <div class="right-body-block">
                <div class="prev-block">
                    <span>点击左侧文件名以查看信息</span>
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- ko with: certainFile --><!-- /ko -->
    </div>
</block>
<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>[{$upyunconfig.bucket}]又拍云空间</h2>
    </div>
    <div>
        <form action="__SELF__" method="post">
            <input type="text" class="search-input" name="prefix" placeholder="输入资源名前缀匹配">
            <button class="btn" type="submit">搜索</button>
            <button class="btn" target-form="ids" id="batchDelBtn" type="button">删 除</button>
            <a href="javascript:location.reload(true);" class="btn">刷新</a>
        </form>
    </div>

    <!-- 数据列表 -->
    <div class="data-table table-striped">
        <form action="{:U('batchDel')}" id="ids">
            <table id="file_list">
                <thead>
                    <tr>
                        <th></th>
                        <th>文件名</th>
                        <th>mimeType</th>
                        <th >最后更新时间</th>
                        <th>文件大小</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                <volist name="_list" id="vo">
                    <tr>
                        <td><input type="checkbox" name="key" value="{$vo.key}"></td>
                        <td>{$vo.key}</td>
                        <td>{$vo.mimeType} </td>
                        <td>{$vo.putTime|strval|substr=###,0,11|bcmul="1000000000"|date="Y-m-d H:i:s",###}</td>
                        <td>{$vo.fsize|format_bytes}</td>
                        <td>
                            <a href="javascript:;" data-href="{:U('rename?file='.$vo['key'])}" class="rename" title="{$vo.key}">重命名</a>
                            <a href="{:$qiniu->downLink($vo['key'])}" target="_blank">下载</a>
                            <a href="{:U('del?file='.$vo['key'])}">删除</a>
                            <a href="javascript:adv('{$vo.mimeType}','{$vo.key}')">高级</a>
                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </form>
    </div>
    <!-- 分页 -->
    <div class="page">
        {$_page}
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

    <script id="hooktpl" type="text/tpl">
        <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
        <label class="item-label">请输入文件名：</label>
        <div class="controls">
        <label class="textarea">
        <input type="text" name="new_name" class="input-large" />
        </label>
        </div>
        </form>
    </script>

    <script id="imgAdv" type="text/tpl">
        <p>
        <table>
        <tbody>
        <tr>
        <td>
        <input type="radio" class="type" name="type" value=0 checked>
        </td>
        <td>
        查看基本信息
        </td>
        </tr>
        <tr>
        <td>
        <input type="radio" class="type" name="type" value=1>
        </td>
        <td>
        查看exif
        </td>
        </tr>
        <tr>
        <td>
        <input type="radio" class="type" name="type" value=2>
        </td>
        <td>
        <form action="{:U('Qiniu/dealImage')}" class="form-horizontal hooktpl" id="resize_form" target="_blank" method="post">
        <label class="item-label">缩放类型：</label>
        <div class="controls">
        <label class="radio">
        <input type="radio" name="mode" value="1">
        非等比缩放
        </label>
        <label class="radio">
        <input type="radio" name="mode" value="2" checked>
        等比缩放
        </label>
        </div>
        <div class="controls">
        <label class="text">
        宽度
        <input type="text" name="w">
        </label>
        <label class="text">
        高度
        <input type="text" name="h">
        </label>
        </div>
        <div class="controls">
        <label class="text">
        质量
        <input type="text" name="q" value="100">(1~100)
        </label>
        <label class="select">
        输出格式：
        <select	name="format">
        <option>jpg</option>
        <option>gif</option>
        <option>png</option>
        <option>webp</option>
        </select>
        </label>
        <input type="hidden" name="imageView" value=1>
        <input type="hidden" name="key">
                </div>
                </form>
                </td>
        </tr>
        </tbody>
                </table>
        </p>
                        </script>

    <script id="videoAdv" type="text/tpl">
                        <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
                        <label class="item-label">请输入文件名：</label>
                                <div class="controls">
                                <label class="textarea">
                                <input type="text" name ="new_name" class="input-large" />
        </label>
                                </div>
                                </form>
    </script>

    <script id="mdAdv" type="text/tpl">
                        <form action="{:U('Qiniu/dealDoc')}" class="form-horizontal hooktpl" id="translate_form" target="_blank" method="post">
                <label class="item-label ">请输入远程css路径：</label>
                <div class="controls">
                        <label class="textarea">
                        <input type="text" name="cssurl" class="input-large" />
                        </la bel>
                        </div>
                                <label class="i tem-label">请选择模式：</label>
                        <div class="controls">
                        <label class="radio">
                <input type="radio" name="mode" value=0 che cked/>
                完整的 HTML(head+body) 输出
                </label>
                        <label class="radio">
                <input type="radio" name="mode" value=1 />
        只转为HTML Body
                        </label>
        </div>
                        <input type="hidden" name="key">
        </form>
    </script>

    <script type="text/javascript">
            (function($){
                                //文件信息预览
                                $('#file_list t r').click (function(event){
                                        $target = $(event.target);
                                        $tr = $(this);
                                                if(!$target.is(':checkbox')){
                                                $('#file_list :checkbox').removeAttr('checked');
                                                $tr.find(':checkbox').prop('checked',true);
                                                $.ajax({
                                                url : '{:U('detail')}',
                        data : { key : $('td:eq(1)', $tr).text()},
                                success: function(data){
                                if(d ata.status){
                                        $('. sidebar .right-cnt').html(data.tpl);
                                                }els e{
                                                updateAlert('获取文件信息失败');
                                        }
                                        }
                                })
                        }
                });

                                //批量删除
                                $(' #batchDelBtn').c lick(function( ){
                                        var $checked = $('#file_list input[name="key"]:checked');
                                                if($checked.length != 0){
                                                if(confirm('您确认删除吗？')){
                                                        $.ajax({
                                                url : ' {:U('batchDel')}',
                                                data : { key : $checked.serialize Array() },
                                                success:  functi o n(d a ta){
                                                if(data.status){
                                u pdateAl ert('删除成功', ' alert-success');
                                        location.reload(true);
                                                }else{
                                                        updateAlert('批量删除失败');
                                }
                                }
                                        });
                                                }
                                                }else{
                                                        updateAlert('请先选择一项');
                            }
                                                        return false;
                                                        });

                                                                //重命名


                                                                $('.rename').click(function(){
                                                                var action = $.trim($(this).data('href'));
                                                        var html  = $($("#hooktpl").html());
                                html.find("input[name=new_name]").val(this.title);
                               html.find("input[name=new_name]").parents('form').attr('action', action);
                            //ajaxForm 公共函数
                    function ajaxForm(element,callback,dataType){
                        var form = $(element).closest('form');
                        var dataType = dataType || 'json';
                        $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: form.serialize(),
                            async: false,
                            dataType:dataType,
                            success: function(data) {
                                if($.isFunction(callback)){
                                    callback(data,form);
                                }
                            }
                        });
                    }

                            option = {
                                    title:'文件名更改',
                                    actions:['close'],
                                    drag:true,
                                    tools:true,
                                    buttons:{"ok":['保存', 'blue',function(){
                                            var _this = this;
                                            ajaxForm(this.find('.input-large'),function(data){
                                                    if (data.status){
                                                            _this.hide();
                                                            updateAlert(data.info,'alert-success');
                                                            setTimeout(function(){
                                            location.reload(true);
                                    },1000);
                                        }else{
                                            updateAlert(data.info);
                                        }
                                            })
                                    }]}
                            }
                            $.thinkbox(html,option);
                    });

            })(jQuery);
            //高级处理
            function adv(mime, key){
                    if($.inArray(mime,['image/jpeg','image/png', 'image/gif']) != -1){
                            //图片
                            var html = $($("#imgAdv").html());
                            var option = {
                                    title:'图片处理',
                                    actions:['close'],
                                    drag:true,
                                    tools:true,
                                    buttons:{"ok":['提 交', 'blue',function(){
                                            var _this = this;
                                            var type = this.find('[name="type"]:checked').val();
                                            if(type == 2){
                                                    this.find('[name=key]').val(key);
                                                    this.find('#resize_form').submit();
                                            }else if(type == 0){
                                                    window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&imageInfo=1'));
                                            }else{
                                                    window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&exif=1'))
                                            }
                                            this.hide();
                                    }]}
                            }
                    }else if(key.slice(-3) == '.md'){
                            //markdown
                            var html = $($("#mdAdv").html());
                            var option = {
                                    title:'md2html转换',
                                    actions:['close'],
                                    drag:true,
                                    tools:true,
                                    buttons:{"ok":['提交', 'blue',function(){
                                            var _this = this;
                                            this.find('[name=key]').val(key);
                                            this.find('#translate_form').submit();
                                    }]}
                            }
                    }else{
                            //视频
                            var html = $($("#videoAdv").html());
                            var option = {
                                    title:'视频处理',
                                    actions:['close'],
                                    drag:true,
                                    tools:true,
                                    buttons:{"ok":['保存', 'blue',function(){
                                            var _this = this;
                                            ajaxForm(this.find('.input-large'),function(data){
                                                    if (data.status){
                                                            _this.hide();
                                                            updateAlert(data.info,'alert-success');
                                                            setTimeout(function(){
                                            location.reload(true);
                                    },1000);
                                        }else{
                                            updateAlert(data.info);
                                        }
                                            })
                                    }]}
                            }
                    }
                    $.thinkbox(html,option);
            }
    </script>
</block>
